<template>
    <div>
        <div class="infinite-list-wrapper" style="overflow:auto">
                <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
                    <li v-show="i<count" v-for="(item,i) in data" :key="item.articleId" class="list-item">
                        <div class="lesson">
                            <img :src="url + item.articleImg" alt="">
                            <section>
                                <p>{{ item.articleName }}</p>
                                <p>{{ item.onlineTime | setTime}}<span>|</span>{{ item.articleType }}</p>
                            </section>
                        </div>
                    </li>
                </ul>
                <p v-if="loading"><i class="el-icon-loading"></i>数据加载中...</p>
                <p v-if="noMore">没有更多了</p>
            </div>
    </div>
</template>

<script>
    export default {
        props:{
            data:Array 
        },
        computed: {
            noMore () {
                return this.count >= this.data.length
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        data(){
            return{
                url:"http://192.168.10.32/yonghao/img/",
                count: 4,
                loading: false,
            }
        },
        methods:{
            load () {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 1500)
            },
        }
    }
</script>

<style scoped lang="scss">
.infinite-list-wrapper{
    margin-bottom: 3vh;
    >p{
        font-size: 3vw;
        text-align: center;
        margin-top: 2vh;
    }
}
.list-item{
    border-bottom: 0.1vw solid #999;
    display: flex;
    padding: 5vw 0;
    justify-content: space-between;
    >p{
        font-size: 4vw;
        color: #FF9D02;
        margin-top: 10vh;
    }
    >.lesson{
        display: flex;
        >img{
            width: 26vw;
        }
        >section{
            padding: 3vw 0 0 5vw;
            >p:nth-child(1){
                font-size: 4.2vw;
            }
            >p:nth-child(2){
                font-size: 3.2vw;
                color: #999;
                margin: 1.5vh 0;
                margin-top: 3vh;
                >span{
                    margin: 0 2vw;
                }
            }
        }
    }
}
</style>